﻿@{
    Style.Reqiured("Layout").AtHead();
    Style.Reqiured("bootStrap").AtHead();
    Style.Reqiured("codemirror").AtHead();
    Script.Reqiured("jQueryUi").AtFoot();
    Script.Reqiured("admin").AtFoot();
    Script.Reqiured("codemirror").AtFoot();
    Model.ContainerClass = Model.ContainerClass ?? "container";
}
@model LayoutEntity
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="zh"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="zh"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="zh"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="not-ie" lang="zh">
<!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="cache-control" content="no-store">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache" />
    @if (ApplicationContext.As<CMSApplicationContext>().OuterChainPicture)
    {
        <meta name="referrer" content="same-origin" />
    }

    <title>[@L("设计")]@Model.LayoutName</title>
    @StyleAtHead()
    @ScriptAtHead()
    <style type="text/css">
        .CodeMirror-hints{
            z-index:1060;
        }
    </style>
</head>
<body class="front">
    <form id="LayoutInfo" asp-controller="Layout" asp-action="SaveLayout" method="post">
        <nav id="toolBar">
            <div class="container">
                <div class="clearfix">
                    <div class="pull-left">
                        <span class="badge">@L("布局设计")</span>
                        <label class="AddContainer zk-btn zk-btn-primary" data-container="container-fluid" title="@L("点击拖动到主屏幕")" style="cursor:move">
                            <i class="glyphicon glyphicon-unchecked"></i>
                            @L("容器")
                            <span class="glyphicon glyphicon-move"></span>
                        </label>
                        <label class="AddRow zk-btn zk-btn-primary" data-container="container-fluid" title="@L("点击拖动到容器")" style="cursor:move">
                            <i class="glyphicon glyphicon-align-justify"></i>
                            @L("行")
                            <span class="glyphicon glyphicon-move"></span>
                        </label>
                        <div class="zk-btn-group">
                            <label id="add-col-handle" class="AddCol zk-btn zk-btn-primary" data-col="col-md-" data-val="6" title="@L("点击拖动到行")" style="cursor:move">
                                <i class="glyphicon glyphicon-tasks"></i>
                                @L("列宽") <span class="col-size-info">@L("6/12")</span>
                                <span class="glyphicon glyphicon-move"></span>
                            </label>
                            <button type="button" class="zk-btn zk-btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                            </button>
                            <ul class="zk-dropdown-menu col-size">
                                <li><a href="javascript:void(0)" data-val="1">@L("1/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="2">@L("2/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="3">@L("3/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="4">@L("4/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="5">@L("5/12")</a></li>
                                <li class="active"><a href="javascript:void(0)" data-val="6">@L("6/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="7">@L("7/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="8">@L("8/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="9">@L("9/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="10">@L("10/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="11">@L("11/12")</a></li>
                                <li><a href="javascript:void(0)" data-val="12">@L("12/12")</a></li>
                            </ul>
                        </div>
                        <a class="zk-btn zk-btn-primary" id="show-source-code" data-toggle="modal" data-target="#modal-layout-code" title="@L("代码")">
                            <i class="glyphicon glyphicon-pencil"></i>
                        </a>
                        <span class="badge" data-toggle="modal" data-target="#question" style="cursor:help">?</span>
                    </div>

                    <div class="pull-right">
                        <div class="zk-btn-group">
                            <a class="zk-btn zk-btn-primary cancel">
                                <i class="glyphicon glyphicon-arrow-left"></i>
                                @L("取消")
                            </a>
                            @if (Model.Page != null)
                            {
                                <a class="zk-btn zk-btn-primary" href="@Url.Action("Design", "Page", new { Model.Page.ID })">
                                    <i class="glyphicon glyphicon-pencil"></i>
                                    @L("编辑页面")
                                </a>
                            }
                            <a href="@Url.Action("LayoutWidget", "Layout", new { LayoutID = Model.ID })" class="zk-btn zk-btn-primary">
                                <i class="glyphicon glyphicon-th-list"></i>
                                @L("内容")
                            </a>
                            <a href="@Url.Action("Edit", "Layout", new {Model.ID})" class="zk-btn zk-btn-primary">
                                <i class="glyphicon glyphicon-edit"></i>
                                @L("属性")
                            </a>
                            <a class="zk-btn zk-btn-primary" id="save">
                                <i class="glyphicon glyphicon-floppy-disk"></i>
                                @L("保存")
                            </a>
                            @await Html.PartialAsync("Partial.Menu", Model)
                        </div>
                        <input type="hidden" id="ContainerClass" name="ContainerClass" value="@(Model.ContainerClass)" />
                        <input type="hidden" id="LayoutId" name="ID" value="@Model.ID" />
                        @if (Model.Page != null)
                        {
                            <input type="hidden" name="Page.ID" value="@Model.Page.ID" />
                        }
                    </div>

                </div>
            </div>
        </nav>
    </form>
    <div id="containers" class="hide">
        @RenderBody()
    </div>

    @await Html.PartialAsync("Layout/Templates")
    @if (!Model.Style.IsNullOrEmpty())
    {
        <link href="@Url.Content(Model.Style)" rel="stylesheet" />

    }
    <div class="zk-modal fade" id="question" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="zk-modal-dialog" role="document">
            <div class="zk-modal-content">
                <div class="zk-modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="zk-modal-title" id="myModalLabel">@L("布局设计说明")</h4>
                </div>
                <div class="zk-modal-body">
                    <h3>
                        @L("居中 / 拉伸")
                    </h3>
                    <ol>
                        <li>
                            @L("居中，宽度响应变化")
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>
                                                @("超小屏幕")
                                                <small>手机 (&lt;768px)</small>
                                            </th>
                                            <th>
                                                @L("小屏幕")
                                                <small>平板 (≥768px)</small>
                                            </th>
                                            <th>
                                                @L("中等屏幕")
                                                <small>@L("桌面显示器") (≥992px)</small>
                                            </th>
                                            <th>
                                                @L("大屏幕")
                                                <small>@L("大桌面显示器") (≥1200px)</small>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>100%</td>
                                            <td>750px</td>
                                            <td>970px</td>
                                            <td>1170px</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </li>
                        <li>
                            @L("拉伸，宽度100%。")<code>@L("在这种情况下，选中行可以设置“行”居中或拉伸。")</code>
                        </li>
                    </ol>
                    <h3>
                        @L("行 / 列宽 / 组件区域")
                    </h3>
                    <ol>
                        <li>
                            <p><code>@L("拖放操作步骤：")</code>@L("1.容器，2.行 -> 容器，3.列 -> 行")</p>
                        </li>
                        <li>
                            <p>@L("行，直接加入到主容器中。")</p>
                        </li>
                        <li>
                            <p>@L("列，只能加入到“行”中。列宽分成12等分，选择任意宽度划分行。")</p>
                        </li>
                    </ol>
                    <h3>
                        @L("帮助")
                    </h3>
                    <ul>
                        <li>
                            <a href="http://www.zkea.net/zkeacms/document/layout" target="_blank">@L("教我操作")</a>
                        </li>
                    </ul>
                </div>
                <div class="zk-modal-footer">
                    <button type="button" class="zk-btn zk-btn-default" data-dismiss="modal">@L("关闭")</button>
                </div>
            </div>
        </div>
    </div>

    <div class="zk-modal fade" id="modal-layout-code" tabindex="-1" role="dialog"  data-keyboard="false" style="display:block;">
        <div class="zk-modal-dialog" style="width:1200px" role="document">
            <div class="zk-modal-content">
                <div class="zk-modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="zk-modal-title">@L("布局代码")</h4>
                </div>
                <div class="zk-modal-body">
                    <textarea id="layout-code" rows="10" cols="10"></textarea>
                </div>
                <div class="zk-modal-footer">
                    <button type="button" class="zk-btn zk-btn-default" data-dismiss="modal">@L("关闭")</button>
                    <button type="button" class="zk-btn zk-btn-primary" id="save-layout-code" data-dismiss="modal">@L("确定")</button>
                </div>
            </div>
        </div>
    </div>
    @if (!Model.Script.IsNullOrEmpty())
    {
        <script type="text/javascript" src="@Url.Content(Model.Script)"></script>
    }
    @StyleAtFoot()
    @ScriptAtFoot()
</body>
</html>
